<script setup lang="ts">
	import {
		ref,
		computed,
		onMounted,
		reactive
	} from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onShow,
		onHide,
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	console.log(userStoreInfo.userInfo, 'userStoreInfo');
	// console.log(userStoreInfo.userInfo);
	// userStoreInfo.getUserInfo(99).then(() => {
	// 	console.log('wancheng');
	// })
	const {
		proxy,
	} = getCurrentInstance()
	onShow(() => {
		getNotice()
	})
	onPageScroll((e) => {
		// console.log(e);
		if (e.scrollTop < 20) {
			bgc.value = 'rgba(255,255,255,0)'
		} else if (e.scrollTop < 30) {
			bgc.value = 'rgba(255,255,255,0.1)'
		}
		else if (e.scrollTop < 40) {
			bgc.value = 'rgba(255,255,255,0.2)'
		}
		else if (e.scrollTop < 50) {
			bgc.value = 'rgba(255,255,255,0.3)'
		}
		else if (e.scrollTop < 60) {
			bgc.value = 'rgba(255,255,255,0.4)'
		}
		else if (e.scrollTop < 70) {
			bgc.value = 'rgba(255,255,255,0.6)'
		}
		else if (e.scrollTop < 80) {
			bgc.value = 'rgba(255,255,255,0.8)'
		}
		else if (e.scrollTop > 100) {
			bgc.value = 'rgba(255,255,255,1)'
		}
	})
	let bgc = ref('rgba(255,255,255,0)')
	//获取轮播图
	const getSwiper = () => {
		proxy.$req('GET', proxy.$api.getSwiper, {
			position: 0,
			count: 5,
		}).then((res) => {
			console.log(res);
			swiperList.value = res.result
		})
	}
	getSwiper()
	//获取营销中心分类
	let marketScreenList = ref([])
	const getMarket = () => {
		proxy.$req('GET', proxy.$api.marketScreen, {}).then((res) => {
			console.log(res);
			marketScreenList.value = res.result
		})
	}
	getMarket()
	const getHaowu = function () {
		proxy.$req('GET', proxy.$api.shopHaowu, {
			isType: 0,
			pageNo: 1,
			pageSize: 6
		}).then((res) => {
			// console.log(res);
			fScrollList.value = res.result.records
		})
	}();
	const userRole = userStoreInfo.userFlag
	console.log(userRole);
	let scrollJinNormal = ref([])
	let scrollJinBusiness = ref([])
	let fScrollList = ref([])
	let noticeText = ref('')
	let router = useRouter()
	let searchWord = ref('')
	let addressName = ref('定位中')
	const getCityByLocationFun = (longitude,latitude)=>{
		console.log(longitude,latitude,'longitude,latitude')
		proxy.$req('GET', proxy.$api.getCityByLocation, {longitude:longitude,latitude:latitude}).then((res) => {
			console.log(res,'getCityByLocation')
			if(res.code == 200){
				if(res.result){
					addressName.value = res.result.name
				}
				let cityObj = {
					areaId: res.result?res.result.areaId:'',
					cityId: res.result?res.result.id:'',
					provinceId: res.result?res.result.pid:''
				}
				uni.setStorageSync('cityInfo', JSON.stringify(cityObj))
				// currentData.value = res.result
			}
		})
	}
	const routerLink = (e, data) => {
		if (e == 'choseAddress') {
			uni.$once('choseAddress', res => {
				console.log(res,'choseAddress');
				addressName.value = res.name
				// getAddress()
				getCityByLocationFun(res.lng,res.lat)
			})
		}
		if(data){
			router.push({
				name: e,
				params: {
					data: JSON.stringify(data),
				}
			})
		}else{
			router.push({
				name: e
			})
		}
	}

	const routerLink1 = (item) => {
		if (userRole == '0') {
			routerLink('job',item)
		} else {
			routerLink('worker', item)
		}
	}
	const getNotice = () => {
		proxy.$req('GET', proxy.$api.indexVipNotice, {
			count: 30
		}).then((res) => {
			console.log(res);
			noticeText.value = ''
			res.result.map((item) => {
				noticeText.value += `恭喜${item.phone}用户成为${item.vip_card_name}，`
			})
			noticeText.value = noticeText.value.slice(0, -1);
		})
	}
	const searchPage = () => {
		// uni.navigateTo({
		// 	url: '/pages/index/searchPage/searchPage'
		// })
		router.push({
			name: 'searchPage',
			params: {
				type: 'index'
			}
		})
	}
	// async function test() {
	// 	console.log(123);
	// 	let aa = await request()
	// 	console.log(aa);
	// }
	// test()

	// function request() {
	// 	return new Promise((resolve, reject) => {
	// 		proxy.$req('GET', 'https://api.oioweb.cn/api/bing', {}, '').then((res) => {
	// 			test.hhh = res.result
	// 			console.log(test);
	// 			setTimeout(() => {
	// 				resolve(res.result)
	// 			}, 2000)
	// 		}).catch((err) => {
	// 			reject(err)
	// 		})
	// 	})
	// }
	const getAddress = () => {
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			success: function (res) {
				getCityByLocationFun(res.longitude,res.latitude)
				// console.log(res);
				// console.log('当前位置的经度：' + res.longitude);
				// console.log('当前位置的纬度：' + res.latitude);

				// // 后面动态获取到信息替换
				// let cityObj = {
				// 	areaId: '110101',
				// 	cityId: '110100',
				// 	provinceId: '110000'
				// }
				// uni.setStorageSync('cityInfo', JSON.stringify(cityObj))
			}
		});
	}
	let swiperList = ref([])
	let localService = ref([])
	const getFatherScreen = function (id = '') {
		proxy.$req('GET', proxy.$api.localService, {
			id,
		}).then((res) => {
			console.log(res);
			localService.value = res.result
		})
	}();
	const localServiceRouter = (params) => {
		router.push({
			name: 'serviceCenter',
			params,
		})
	}
	const goodsDetail = (id) => {
		router.push({
			name: 'goodsDetail',
			params: {
				id,
			}
		})
	}

	//获取招聘分类
	const getCategoryList = () => {
		proxy.$req('GET', proxy.$api.getCategoryList, {}).then((res) => {
			console.log(res);
			if (res.code === 200) {
				scrollJinNormal.value = res.result
				// state.scrollJin = res.result
				// console.log(res.result)
				// state.currentObj = res.result.length>0?res.result[0]:{}
				// getRecruitmentPositionList()
			}
		})
	}
	onMounted(() => { })

	onLoad(() => {
		userStoreInfo.meiyeRecruitJob3ListFun()
		getCategoryList()
		getAddress()
		userStoreInfo.getAllJobListFun()
		userStoreInfo.getAllAddressTreeFun()
		userStoreInfo.getZpClassifyFun(1)

	})
</script>
<template>
	<view class="indexHeader">
		<view class="searchEle">
			<u-navbar :placeholder="true" :bgColor="bgc" :fixed="true" height="50">
				<template #left>
					<view class="seLeft r-flex-center-center " @click="routerLink('choseAddress')">
						<text class="u-line-1">{{addressName}}</text>
						<u-icon name="arrow-down-fill" size="20rpx"></u-icon>
					</view>
				</template>
				<template #right>
					<view style="width: 550rpx;" @click="searchPage">
						<u-search v-model="searchWord" label="" :show-action="false" searchIconSize="20" shape="square">
						</u-search>
					</view>
				</template>
			</u-navbar>
		</view>
		<u-swiper :list="swiperList" indicatorStyle="left:50rpx;" keyName="imgUrl" :indicator="true" :autoplay="false"
			height="600rpx"></u-swiper>
	</view>
	<!-- 公告 -->
	<view class="notice">
		<u-notice-bar :text="noticeText" bgColor="#F6F6F6" color="#000"></u-notice-bar>
	</view>
	<!-- 金刚区 -->
	<view class="scrollList">
		<u-scroll-list :indicator="false">
			<view class="scroll-list">
				<view class="scroll-list__line" v-for="(item, index) in scrollJinNormal" :key="index">
					<!-- :class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']" -->
					<view class="scroll-list__line__item c-flex-center-center" style="margin-top: 20rpx;"
						@click="routerLink1(item)">
						<image class="scroll-list__line__item__image" :src="item.url" mode="">
						</image>
						<text v-if="userRole == 0" class="scroll-list__line__item__text">{{ item.name }}</text>
						<text v-if="userRole != 0&&item.name.length<5" class="scroll-list__line__item__text">
							{{ item.name.substring(0, 2) }}人才</text>
						<text v-if="userRole != 0&&item.name.length>=5" class="scroll-list__line__item__text">
							{{ item.name.substring(0, 3) }}人才</text>
					</view>
				</view>
			</view>
		</u-scroll-list>
	</view>
	<view class="scrollList" v-if="userRole == 1">
		<u-scroll-list :indicator="false">
			<view class="scroll-list">
				<view class="scroll-list__line" v-for="(item, index) in scrollJinBusiness" :key="index">
					<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
						@click="routerLink('worker',item)"
						:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
						<image class="scroll-list__line__item__image" src="../../static/logo.png" mode="">
						</image>
						<text class="scroll-list__line__item__text">{{ item1.name }}</text>
					</view>
				</view>
			</view>
		</u-scroll-list>
	</view>
	<!-- 营销中心 -->
	<view class="contentAll">
		<view class="marketing">
			<view class="mTitle">
				营销中心
			</view>
			<view class="mContent">
				<view class="mContentItem r-flex-center-center" @click="routerLink('marketing',item)"
					v-for="(item,index) in marketScreenList" :key="index">
					<image :src="item.url" mode=""></image>
					<text>{{ item.name }}</text>
				</view>

			</view>
		</view>
		<view class="getBusiness" @click="routerLink('investmentCenter')">
			<text style="">美业招商合作中心</text>
		</view>
		<!-- 服务中心 -->
		<view class="service">
			<view class="sTitle">
				<text class="st1">服务中心</text>
				<!-- <view class="st2" @click="routerLink('serviceCenter')">查看全部 <u-icon name="arrow-right"></u-icon> </view> -->
			</view>
			<view class="sContent">
				<view class="sContentItem c-flex-center-center" v-for="(item,index) in localService" :key="index"
					@click="localServiceRouter(item)">
					<image :src="item.url"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view class="getBusiness" v-if="userRole==1" @click="routerLink('employWorker')">
				<text>美业共享短工</text>
			</view>
		</view>
		<!-- 每页优选 -->
		<view class="fine" v-if="userRole!=2">
			<view class="fTitle">
				<text class="st1">美业优选</text>
			</view>
			<view class="fScroll">
				<u-scroll-list :indicator="false">
					<view class="scroll-list" style="flex-direction: row;">
						<view class="scroll-list__goods-item" v-for="(item, index) in fScrollList" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
							@click="goodsDetail(item.id)">
							<image class="scroll-list__goods-item__image" :src="item.image"></image>
							<view class="scroll-list__goods-item_title u-line-2">
								{{ item.name }}
							</view>
							<view class="scroll-list__goods-item__text">
								<text class="scroll-list__goods-item__text_text1 intFont"><text
										style="font-size: 20rpx;">￥</text>{{ item.price }}</text>
								<view class="r-flex-start-center">
									<text class="scroll-list__goods-item__text_text2">￥{{ item.vipPrice }}</text>
									<image src="http://image.qiniu.qdytcy.com/2023/7/12/vipTag.png"
										class="scroll-list__goods-item__text_text3" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view class="news" @click="routerLink('appNews')">
			<text>美业动态</text>
		</view>
	</view>
	<!-- <button @click="routerLink('login')">123</button> -->
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA !important;
	}

	.indexHeader {
		width: 100%;
		height: 600rpx;
		// background-color: #F4D3CB;
		// background-image: url('../../static/background/indexBanner.png');
		background-size: 100% 100%;

		.searchEle {
			width: 686rpx;
			height: 120rpx;
			// background-color: #e7e7e7;
			display: flex;
			align-items: center;
			position: absolute;
			z-index: 1;
			left: 32rpx;
			top: 10rpx;

			.seLeft {
				margin-right: 20rpx;
				width: 130rpx;
				font-size: 28rpx;

				text {
					margin-right: 10rpx;
				}
			}
		}
	}

	.notice {
		width: 686rpx;
		margin: 30rpx auto 0;
	}

	.scrollList {
		width: 686rpx;
		margin: 30rpx auto 0;

		.scroll-list {
			@include flex;
			width: 100%;
			flex-wrap: wrap;

			&__line {
				width: 20%;
				flex-shrink: 0;
				@include flex;
				flex-wrap: wrap;
				margin-top: 10rpx;

				&__item {
					flex-shrink: 0;
					width: 100%;
					// margin-right: 42rpx;
					box-sizing: border-box;

					&__image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}



					&__text {
						margin-top: 5rpx;
						color: $u-content-color;
						font-size: 24rpx;
						text-align: center;
					}

					&--no-margin-right {
						margin-right: 0;
					}
				}
			}
		}
	}

	.contentAll {
		width: 686rpx;
		margin: 30rpx auto 0;
		padding-bottom: 70rpx;

		.marketing {
			width: calc(100% - 60rpx);
			margin: 30rpx auto 0;
			// background-color: #F9F4F2;
			background-image: url('http://image.qiniu.qdytcy.com/2023/7/12/yingxiaoBg.png');
			background-size: 100% 100%;
			border-radius: 24rpx;
			padding: 0 30rpx;

			.mTitle {
				font-size: 36rpx;
				color: #333;
				font-weight: 500;
				padding: 20rpx 0rpx;
			}

			.mContent {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: center;
				padding-bottom: 12rpx;



				.mContentItem {
					width: 296rpx;
					height: 104rpx;
					line-height: 100rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin: 15rpx 0;
					font-size: 24rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						margin-left: 15rpx;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
			}
		}

		.getBusiness {
			width: 100%;
			height: 200rpx;
			// background-color: #e7e7e7;
			background-image: url('http://image.qiniu.qdytcy.com/2023/7/12/getBusiness.png');
			background-size: 100%;
			border-radius: 10rpx;
			margin-top: 40rpx;
			color: #fff;

			text {
				display: inline-block;
				font-size: 36rpx;
				margin-top: 68rpx;
				margin-left: 32rpx;
				font-weight: 600;
			}
		}

		.service {
			width: calc(100% - 40rpx);
			// height: 240rpx;
			margin: 30rpx auto 30rpx;
			padding: 25rpx 20rpx;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 24rpx;
			border: 2rpx solid #fff;

			.sTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.st1 {
					font-size: 36rpx;
					color: #333;
					font-weight: 500;
				}

				.st2 {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}
			}

			.sContent {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.sContentItem {
					width: 25%;
					height: 150rpx;
					margin: 15rpx 0;
					font-size: 24rpx;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 10rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: 400;
						margin-top: 10rpx;
					}
				}
			}

			.getBusiness {
				width: 100%;
				height: 200rpx;
				// background-color: #e7e7e7;
				// background-image: url('http://image.qiniu.qdytcy.com/2023/7/12/getBusiness.png');
				background-image: url('../../static/zs.png');
				background-size: 100%;
				border-radius: 10rpx;
				margin-top: 40rpx;
				color: #462727FF;
				background-repeat: no-repeat;

				text {
					display: inline-block;
					font-size: 36rpx;
					margin-top: 68rpx;
					margin-left: 32rpx;
					font-weight: 600;
				}
			}
		}

		.fine {
			width: calc(100% - 32rpx);
			height: calc(496rpx - 64rpx);
			padding: 32rpx 0rpx 32rpx 32rpx;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #fff;

			.fTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.st1 {
					font-size: 36rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.fScroll {
				margin-top: 30rpx;

				.scroll-list {
					@include flex(column);
					width: 180rpx;
					height: 360rpx;

					&__goods-item {
						margin-right: 16rpx;

						&__image {
							width: 192rpx;
							height: 192rpx;
							border-radius: 10rpx;
						}

						&_title {
							height: 68rpx;
							font-size: 24rpx;
							font-weight: 400;
						}

						&__text {

							&_text1 {
								color: #f56c6c;
								font-size: 32rpx;
								font-weight: bold;
								margin-top: 5rpx;
								height: 68rpx;
							}

							&_text2 {
								display: inline-block;
								margin-top: 10rpx;
								height: 28rpx;
								color: #333;
								font-size: 24rpx;
							}

							&_text3 {
								width: 60rpx;
								height: 28rpx;
								margin-top: 10rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}

		.news {
			width: 100%;
			height: 200rpx;
			// background-color: #E7E7E7;
			background-image: url('http://image.qiniu.qdytcy.com/2023/7/12/newsBg.png');
			background-size: 100% 100%;
			border-radius: 10rpx;
			margin-top: 20rpx;

			text {
				display: inline-block;
				font-size: 36rpx;
				margin-top: 68rpx;
				margin-left: 32rpx;
				font-weight: 600;
			}
		}
	}
</style>